<template>
  <div class="shopcart-container">
    <!-- 收货地址区域 -->
    <div class="address-container">
      <router-link :to="{ name: 'address_select' }" replace>
        <h3>{{ address.name }} {{ address.phone }}</h3>
        <p>{{ address.area }} {{ address.detail }}</p>
      </router-link>
    </div>
    <!-- 商品列表 -->
    <div class="goods-list">
      <!-- 商品列表项区域 -->
      <div class="card">
        <div class="card-content" v-for="(item,i) in goodsList" :key="i">
          <img :src="APIBaseURL + item.goods_img" />
          <div class="info">
            <div class="name">{{ item.goods_name }}</div>
            <div class="price_count">
              <span class="price">¥{{ item.price }}</span>
              <span>x{{item.count }}</span>
            </div>
          </div>
        </div>
        <!-- 配送信息 -->
        <div class="process-info">
          <p><strong>配送服务</strong></p>
          <p><span>中小件送货时间</span></p>
          <p> <strong>快递运输</strong></p>
         <p> <span>工作日、双休日与节假日均可送货</span></p>
        </div>
        <!-- 订单备注 -->
        <div class="store-info">
          <div><strong>订单备注</strong></div>
          <div>
            <textarea
              v-model="note"
              type="text"
              placeholder="选填，给商家留言"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <!-- 运费信息 -->
    <ul class="fare-info">
      <li class="fare-price">
        <span>商品金额</span>
        <span class="red">¥{{ amount.toFixed(2) }}</span>
      </li>
      <li class="fare-price">
        <span>运费</span>
        <span class="red">¥0.00</span>
      </li>
      <li class="fare-price">
        <span>
          <strong>总价</strong>
        </span>
        <span class="red">¥{{ amount.toFixed(2) }}</span>
      </li>
    </ul>
    <!-- 创建订单按钮 -->
    <div class="flex">
      <mt-button @click="OnClickCreateOrder" size="large">创建订单</mt-button>
    </div>
  </div>
</template>

<script>
import {HTTPCreateOrder} from "@/api/order.js"
import {HTTPGetDefaultAddress} from "@/api/address.js"
import { mapState } from "vuex";
import {HTTPGetCartListChecked} from "@/api/cart.js"
export default {
  data() {
    return {
      goodsList: [],
      amount: 0,
      note: "",
      address: {},      
    };
  },
  computed: {
    ...mapState("shopcart", ["buy"]),    
  },
  created() {
    if (this.$route.params.addressId) { //通过路由名 address_select 转来的
      this.address.id = this.$route.params.addressId;
    }
    this.getDefaultAddress();
    this.getGoodsList();
  },
  methods: {
    buyItem(id) {
      let item = this.buy.filter((item) => item.id == id)[0];
      return item;
    },
    async getGoodsList() {
      try {        
        let result = await HTTPGetCartListChecked();
        // console.log(result)
        if(result.code == 1){          
          this.goodsList = result.data;  
          this.amount = 0;
          this.goodsList.forEach((item) => {        
            this.amount += item.count * item.price;
          });         
        }
        else if (result.code == 2) {  //需要用户登录的
          this.$router.push({ name: "login" });
        }
        else {
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)        
      }
    },//===================================================  


    async getDefaultAddress() {
      try {
        let params = { id: this.address.id };
        let result = await HTTPGetDefaultAddress(params);
        // console.log(result)
        if(result.code == 1){
          if(result.data.length == 1){
            this.address = result.data[0];            
          }else{
            this.$toast("请先添加收货地址");
            this.$router.replace({ name: "address_select" });
          }
        }
        else if (result.code == 2) {  //需要用户登录的
          this.$router.push({ name: "login" });
        }
        else {
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)        
      }
    },//===================================================      
     
    async OnClickCreateOrder() {
      try {
        let goods=[];
        this.goodsList.forEach( item => goods.push({id:item.goods_id, count:item.count, price:item.price}));
        let params = {
          address: this.address,
          amount:this.amount,
          goodsList: goods,
          note: this.note,
        };
        // console.log(params)
        let result = await HTTPCreateOrder(params);
        // console.log(result)
        if(result.code == 1){          
          this.$toast(result.msg);  
        }else if(result.code == 2){
          this.$router.push({ name: "login" });
        }
        else
        {
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)        
      }
    },//===================================================

  },
};
</script>

<style lang="scss" scoped>
.shopcart-container {
  display: flex;
  flex-direction: column;
  background: #eee;
  overflow: hidden;
  // 收货地址
  .address-container {
    background-color: rgb(218, 240, 240);
    margin: 0;
    padding: 10px;
    h3 {
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
  }
  // 商品列表
  .goods-list {    
    .card {
      background-color: rgb(224, 230, 231);
      margin: 0;
      .card-content {
        display: flex;        
        border-bottom: 1px solid rgb(163, 157, 157);
        align-items: center;
        padding: 10px;
        img {
          width: 60px;
        }
        .info {
          margin-left: 10px;
          box-sizing: border-box;
          width: 100%;
          overflow: hidden;
          .name {
            font-size: 12px;
            font-weight: bold;
            line-height: 20px;
            padding-top: 22px;
          }
          .price_count {
            display: flex;
            justify-content: flex-end;
            .price {
              font-size: 16px;
              font-weight: 700;
              color: red;
              flex: 1;
            }
          }
        }
      }
      // 配送信息
      .process-info {
        padding: 10px;
        border-bottom: 1px solid #eee;
        p {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          color: #333;
          span {
            color: #999;
          }
        }
      }
      // 店铺备注
      .store-info {
        padding: 10px;
        textarea {
          font-size: 13px;
          width: 100%;
        }
      }
    }
  }
  // 运费信息
  .fare-info {
    background-color: lightgray;
    padding: 10px;
    margin: 10px 0 0 0;
    .fare-price {
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      .red {
        color: red;
        font-size: 16px;
      }
    }
  }
}
</style>
